import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
import ElementUI from "element-ui";
import "element-ui/lib/theme-chalk/index.css";
import baseCss from "../src/assets/style/base.less"; //引入全局的基础样式
import qfSubMenu from 'qf-sub-menu'//引入封装好的侧边栏组件
import elReset from '../src/assets/style/el-reset.less'//引入侧边栏的样式

//导入进度条
import NProgress from 'nprogress'
// 导入进度条的样式
import 'nprogress/nprogress.css'
Vue.use(qfSubMenu) //全局使用这个组件
 
// 在全局使用路由前置守卫，使用守卫的目的是，防止出现在
router.beforeEach((to, from, next) => {
  NProgress.start() //在前置守卫时开始显示进度条
  // to表示的是将要进入的目标对象
  // from表示的是要离开的目标对象
  // next 表示放行
  //判断本地存储中是否有token
  //如果有就放行，如果没有就不通过，重新跳转到登入员
  //除了登入页以外，其它所有的页面，在没有登入 的情况下都不给用户访问
  let token = localStorage.getItem("qf-token");
  if (token) {
    //如果存在token
    // next();
    //判断用户菜单有没有生成
    if (store.state.sideMenu.length === 0) { //没有生成
      store.dispatch('FETCH_MENU_LIST')
        .then(() => {
          next({ path: to.path })
          ///这里要注意，next里面要传参数即要进入的页面的路由信息，因为next传参数后，当前要进入的路由会被废止，转而进入参数对应的路由，虽然是同一个路由，这么做主要是为了确保addRoutes生效了。
        })
    } else {
      next()
    }
  } else {
    //不存在token
    if (to.path !== "/login") {
      //不是登录页
      next({ path: "/login" }); //跳转到登录页
    } else {
      next();
    }
  }
});

// 自定义指令鉴权
Vue.directive('pin',{
  bind(el,binding){
    // console.log(el); //打印的是自定义指令的元素
    // console.log(binding); //打印的是自定义指令的元素的相关属性
    //获取存到本地的鉴权数据
    let permission = localStorage.getItem('permission_button')|| '[]'
    let permission_button = JSON.parse(permission) //转换成非字符串格式
    // console.log(permission_button);
    if(!permission_button.includes(binding.value)){ //如果在本地存储中的数据，不包括绑定的value
      //获取绑定元素的类名，并且保存这个类名
      let elClassName = el.className
      //给不满足条件的按钮加上禁用按钮的类名
      // is-disabled是element元素中的禁用按钮的属性
      el.className = elClassName+''+'is-disabled'
      //真正禁用按钮
      el.disabled = true
      el.style.backgroundColor = 'gray'
      el.style.cursor = 'default'
      el.style.color = '#e6e6e6'
      el.style.opactity='0.9'
    }
  }
})

// 面包屑的处理要使用路由后置守卫
router.afterEach((to,from)=>{
  NProgress.done() //在后置守卫时让进度条消失
  // to表示的是将要进入的目标对象
  // from表示的是要离开的目标对象
  // 路由后置守卫，此时路由都已经进入到页面中了，所以没有next参数
  // console.log(to);//打印的结果是我们点击的路由的信息
  // to.matched.splice(0,1) //splice截取数组，会改变原数组，此处表述的是从第一项开始截取，截取长度为1
  // console.log(to.matched); //打印的是我们点击到的信息
  //通过to.matached中匹配到的数据，来完成面包胥的功能，将匹配到的信息存到vuex中
  let breadCrumb = [...to.matched] //重新定义一下，以避免直接曹处to.matched会出错。
  breadCrumb.splice(0,1)//splice截取数组，会改变原数组，此处表述的是从第一项开始截取，截取长度为1
  // console.log(breadCrumb);
// 将breadCrumb存到vuex中的state中
// 因为我们已经将store引进来了，所以可以直接使用store提交
store.commit('SET_BREADCRUMB', breadCrumb)
})

Vue.config.productionTip = false;
Vue.use(baseCss); //全局使用这个样式
Vue.use(elReset)//全局使用这个侧边栏的样式
Vue.use(ElementUI);
new Vue({
  router,
  store,
  render: (h) => h(App),
}).$mount("#app");
